<template>
	<view>
		<view class="top">
			<view class="navbar" :style="{ height: navBarHeight + 'px' }"><text style="font-size: 36upx;">毕业设计</text></view>

			<image src="https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/%E7%BB%84%201042.png" mode=""></image>
			<view class="search">
				<view class="search-input">
					<text class="iconfont icon-sousuo"></text>
					<input class="text-normal" type="text" :value="searchValue" :placeholder="placeholder" @input="searchInput" />
				</view>
				<view class="btn-cancel" @click="cancelSearch">取消</view>
			</view><!-- 
			<yzbfilterDropdown
				:menuTop="0"
				:filterData="filterData"
				:defaultSelected="defaultSelected"
				:updateMenuName="true"
				@confirm="confirm"
				dataFormat="Object"
				ref="filter"
			></yzbfilterDropdown> -->
		</view>
		<view class="body" >
			<template>
				<m-position listType="0" :positions="list" @click="designDetail" :isAuth="isAuth"></m-position>
			</template>
			<view class="load-more-box">
				<uni-load-more v-if="status == '请求中'" status="正在加载..." :showIcon="true"></uni-load-more>
				<uni-load-more v-if="status == '没有更多'" status="没有更多了" :showIcon="false"></uni-load-more>
				<uni-load-more v-if="status == '暂无数据'" status="暂无数据" :showIcon="false"></uni-load-more>
				<uni-load-more v-if="status == '请求失败'" status="加载失败，点我重试" :showIcon="false" @click="reLoad"></uni-load-more>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations, mapGetters } from 'vuex';
import mPosition from '@/components/yzb/yzb-position.vue';
import yzbfilterDropdown from '@/components/yzb/yzb-filterDropdown.vue';
export default {
	components: {
		mPosition,
		yzbfilterDropdown
	},
	computed: {
		...mapState(['userInfo']),
		...mapGetters(['hasLogin'])
	},
	data() {
		return {
			statusBarHeight: 0,
			navBarHeight: 0,
			topHeight: 0,
			list: [],
			showToast: false,
			status: '暂无数据',
			isAuth:true,
			query: {
				current: 1,
				number: 10
			},
			searchValue: '',
			placeholder: '请输入关键词搜索相关内容',
		
		};
	},
	created() {
		//获取手机状态栏高度
		this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
		//#ifdef MP-WEIXIN
		this.navBarHeight = uni.getMenuButtonBoundingClientRect().bottom;
		this.topHeight = this.navBarHeight + uni.upx2px(80);
		//#endif
	},
	
	onLoad(options) {
		  this.showToast = true;
		
	},
	onShow() {
		uni.showToast({
			title: "暂未开放，敬请期待！",
			icon: 'none',
			position: 'bottom'
		});
	},

	onPullDownRefresh() {
	},

	onReachBottom() {
	},
	methods: {
	
	}
};
</script>
<style lang="scss">


.top {
	width: 100%;
	// height: 180upx;
	//position: fixed;
	top: 0;
	z-index: 999;
	//display: flex;
	//flex-direction: column;
	image{
		 z-index:-1; 
		 width:100%; 
		 position: fixed; 
		 top:0; 
	}
	.navbar {
		height: 100upx;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		text {
			color: #000;
			font-weight: bolder;
		}
	}
}

.search {
	width: 100%;
	display: flex;
	height: 90upx;
	z-index: 999;
	flex-direction: row;
	color: $font-color-999;
	align-items: center;
	justify-content: center;
	.icon-sousuo {
		color: $font-color-999;
		font-size: $uni-font-size-base;
		margin: 0 15upx;
	}
	.search-input {
		width: 77%;
		height: 65upx;
		border-radius: 50upx;
		display: flex;
		flex-direction: row;
		background-color: #ffffff;
		align-items: center;
	}
	.search-input image {
		width: 35upx;
		height: 35upx;
		margin-right: 10upx;
	}
	.search-input input {
		width: 65%;
		font-size: 28upx;
		color: $font-color-333;
	}

	.btn-search {
		margin-left: 20upx;
	}

	.btn-cancel {
		margin-left: 20upx;
	}
}
</style>
